<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>TheMatrix</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <link rel="icon" href="image/1.ico" type="image/x-icon">
  <link rel="shortcut icon" href="image/1.ico" type="image/x-icon">

  <link rel="stylesheet" type="text/css" href="fonts.css">

  <script type="text/javascript" src="js/dat.gui.min.js"></script>
  <script type="text/javascript" src="js/p5.min.js"></script>
  <script type="text/javascript" src="js/p5.dom.min.js"></script>

  <input id="img-path" type="file" />
  
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    #credits {
      font-size: 12px;
      position: absolute;
      bottom: -25px;
      right: 15px;
      color: #ffffff;
      max-width: 70%;
      text-align: right;
      line-height: 20px;
    }


    .logo {
      font-size: 12px;
      position: absolute;
      bottom: 80px;
      left: 25px;
      color: #ffffff;
      max-width: 70%;
      line-height: 20px;
      opacity: 0.7;
    }

    .social{
      opacity: 0.7;
    }
    .iconlink{
      bottom: 50px;
      margin-right: 0px;
    }
    #img-path {
      display: none;
    }

  </style>
</head>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?44f8fa2f0b239ea3093628142486b48a";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
</script>

<body>


 <div id="credits"> 
   <div class = "social" style="margin-right:10px">Created by <a href = "https://wangyasai.github.io/DesignTool.html">@Yasai</a></div>
   <div class = "social" style="margin-right:10px; margin-bottom: -40px">©️All my products may be used in both personal and commercial projects   </div>
   <div class ="iconlink"> 
    <span><a class="icon-weibo" href="https://weibo.com/psaiaevegas/profile?rightmod=1&wvr=6&mod=personnumber"  target="_blank"  data-icon="&#xe906;" ></a></span>
    <span><a class="icon-zhihu" href="https://www.zhihu.com/people/wang-ya-sai/activities"  target="_blank"  data-icon="&#xe907;"></a></span>
    <span><a class="icon-instagram" href="http://instagram.com/yasaisai"  target="_blank"  data-icon="&#xe903;"></a></span>
    <span><a class="icon-twitter" href="https://twitter.com/yasai_wang"  target="_blank"  data-icon="&#xe905;"></a></span>
  </div>

</div>

<div class = "logo" style="margin-left:10px; margin-bottom: -40px; "><a href = "https://wangyasai.github.io/designtools.html"><img src="logo.png" style ="width: 40px"></a></div>


<script type="text/javascript">

  var type;
  var options ={  
    Background : '#0a0a0a',
    Color : '#01FF45',
    Opacity: 150,
    Unicode : 'Katakana',
    DropSpeed : 2,  
    TextSpeed : 15,  
    Size : 14,
    Direction : '↓',
    RotateAngle: 45,
    Text : "*…o--------o…*",
    Random: function () { 
      var Color = random(['#03F9FF','#FFE003','#ffffff','#FF039F']);
      color1Control.setValue(Color);

      TextSpeed = random(5,20);
      ChangeSpeedControl.setValue(TextSpeed);

      Opacity = random(100,200);
      OpacityControl.setValue(Opacity);

       Unicode = random(['Katakana', 'Braille','BoxDrawing','CJK Radicals Supplement','Kanbun','Yi Syllables']);
       UnicodeControl.setValue(Unicode);
    },

    isPNG : false,
    Save : function(){
      saveFrames("The Matrix", "png", 1, 1);
    },
  }




  var text, gui, config,bgcolorControl,ShapeControl,LineControl,CountsCont,RandomControl,imageControl,color1Control,color2Control, SpeedControl, pngControl,SaveControl ,SmoothControl2,SaveControl,SizeControl,OpacityControl,ChangeSpeedControl,  UnicodeControl,RotateControl;

  window.onload = function() {
    gui = new dat.GUI();

  //folder1
  var folder1 = gui.addFolder('Controls');

  bgcolorControl = folder1.addColor(options, 'Background');
  bgcolorControl.onChange(draw);

  color1Control = folder1.addColor(options, 'Color');
  color1Control.onChange(draw);


  OpacityControl = folder1.add(options, 'Opacity',10,200);
  OpacityControl.onChange(draw);


  SizeControl = folder1.add(options, 'Size',8,20);
  SizeControl.onChange(draw);
 

  SpeedControl = folder1.add(options, 'DropSpeed',0,20);
  SpeedControl.onChange(draw);


  ChangeSpeedControl = folder1.add(options, 'TextSpeed',1,45);
  ChangeSpeedControl.onChange(Symbol);


  DirectionControl = folder1.add(options, 'Direction',['↓', '↑','→','←','freeAngle'] );
  DirectionControl.onChange(setup);
  DirectionControl.onChange(draw);
 
  RotateControl = folder1.add(options, 'RotateAngle',0,360);
  RotateControl.onChange(setup);
  RotateControl.onChange(draw);
 

  UnicodeControl = folder1.add(options, 'Unicode',['Katakana', 'Braille','BoxDrawing','CJK Radicals Supplement','Kanbun','Yi Syllables','Text'] );
  UnicodeControl.onChange(Symbol);
 

  var textControl = folder1.add(options, 'Text'); 
  textControl.onChange(function(){
    type='text';
    draw();
  });

  RandomControl = folder1.add(options, 'Random');

  pngControl = folder1.add(options, 'isPNG');
  pngControl.onChange(draw);

  var SaveControl = folder1.add(options, 'Save');

  
  folder1.open();
  

};



function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}


</script>

<script type="text/javascript" src="js/sketch.js"></script>
</body>

</html>
